<template>
    <div style="width: 70%">
    <div style="margin-bottom: 30px">新增新闻</div>
    <el-form :inline="true" :model="form"  :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="标题" prop="title" >
            <el-input v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
      <el-form-item label="正文"  prop="body"  >
        <el-input     style="width: 1000px" type="textarea"  autosize  v-model="form.body" placeholder="请输入正文"></el-input>
      </el-form-item>
      <el-form-item label="图片" prop="image">
        <el-upload
            class="avatar-uploader"
            :action="'http://localhost:9090/api/file/upload?token=' + this.admin.token"
            :show-file-list="false"
            :on-success="handleCoverSuccess"
            :on-change="onChange"
        >
          <img v-if="form.image" :src="form.image " class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

    </el-form>
        <div style="text-align: center  ;margin-top:5px ">
            <el-button type="primary" @click="save" size="medium">提交</el-button>
            <el-button type="info" @click="$router.push('newFuzhouBackground')">返回</el-button>
        </div>
    </div>
</template>

<script>
    import request from "@/util/request";
    import Cookies from "js-cookie";

    export default {
        name: "AddnewFuzhou",
        data() {
            return {
                form:{
                  image:''
                },
              admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
            }

        },
        methods:{
          onChange (file) {
            if(file){
              const suffix = file.name.split('.')[1]
              const size = file.size / 1024 / 1024 < 2
              if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                this.$refs.upload.clearFiles()
                return false
              }
              if(!size){
                this.$message.error('上传文件大小不能超过 2MB!')
                return false
              }
              return file
            }
          },
          handleCoverSuccess(res) {
            if (res.code === '200') {
              console.log(res.data)
              // this.$set(this.form, 'cover', res.data)
              this.form.image = res.data
            }
          },
            save(){
              request.post("/newFz/insert",this.form).then(res=>{
                if (res.code=="200"){
                  this.$notify.success("新增成功")
                  this.$router.push('newFuzhouBackground')
                }else{
                  this.$notify.error(res.msg)
                }
              })

            }
        }
    }
</script>


